<template>
  <el-upload
    ref="CuploadImageList"
    class="CuploadImageList"
    :action="action"
    :headers="headers"
    list-type="picture-card"
    :file-list="fileList"
    multiple
    accept="image/*"
    drag
    name="file"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :on-success="handleSuccess"
  >
    <svg-icon icon-class="uploadImage" class-name="avatar-uploader-icon" />
    <CImageViewer :viewer-image-url.sync="viewr.viewerImageUrl" :visible.sync="viewr.visible" />
  </el-upload>
</template>
<script>
import { getToken } from '@/utils/auth'
export default {
  name: 'CuploadImageList', // 上传多个图片组件（返回文件信息列表）
  props: {
    width: {
      type: String,
      default: '180px'
    },
    height: {
      type: String,
      default: '180px'
    },
    fileList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      action: `${process.env.VUE_APP_BASE_API}/fileHandle/qiniuImage`,
      headers: { token: getToken() },
      viewr: { // 图片预览数据
        visible: false,
        viewerImageUrl: []
      },
      deleteIds: [], // 点击删除的ids
      successnum: 0 // 上传成功的数量
    }
  },
  watch: {
    width: {
      handler(n) {
        // 动态更新scss变量 https://www.cnblogs.com/lmxxlm-123/p/10910544.html
        document.getElementsByTagName('body')[0].style.setProperty('--width-upload', n)
      },
      immediate: true
    },
    height: {
      handler(n) {
        // 动态更新scss变量 https://www.cnblogs.com/lmxxlm-123/p/10910544.html
        document.getElementsByTagName('body')[0].style.setProperty('--height-upload', n)
      },
      immediate: true
    },
    fileList: {
      handler(n) {
        this.successnum = n.length
      },
      immediate: true
    }
  },
  methods: {
    // 点击删除文件
    handleRemove(file) {
      const fileId = file.id || file.response.data.id // 点击删除的文件id
      const index = this.fileList.findIndex(item => { // 获取索引
        if (item.id) {
          return item.id === fileId
        } else if (item.response) {
          return item.response.data.id === fileId
        }
      })
      const data = this._.cloneDeep(this.fileList)
      data.splice(index, 1)
      this.$emit('update:fileList', data)

      // 返回删除ids
      this.$emit('remove', fileId)
    },
    // 点击放大
    handlePictureCardPreview(file) {
      this.viewr.viewerImageUrl = [file.url]
      this.viewr.visible = true
    },
    // 上传成功回调
    handleSuccess(res, file, fileList) {
      console.log(res, file, fileList)
      if (res.code === 0) {
        this.successnum++
        if (this.successnum === fileList.length) {
          this.$message.success('上传成功')
          this.$emit('update:fileList', fileList)
          this.$emit('onSuccess', fileList) // 成功回调
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/styles/element-variables.scss";
$width: var(--width-upload);
$height: var(--height-upload);
.CuploadImageList{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  ::v-deep .el-upload-list--picture-card{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .el-upload-list__item{
      width: $width;
      height: $height;
      margin: 0 12px 12px 0;
      img{
        object-fit: cover;
      }
    }
  }
  ::v-deep .el-upload--picture-card{
    width: $width;
    height: $height;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 12px 12px 0;
    .el-upload-dragger{
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
::v-deep .el-upload:hover{
  .avatar-uploader-icon{
    color: $--color-primary;
  }
}
.avatar-uploader-icon{
  font-size: 34px;
  color: #8c939d;
}
</style>
